// 主题色变量
@import '@/styles/variables.scss';

.container {
  min-height: 100vh;
  background: $bg-color;
  padding-top: 5vh;
  padding-bottom: env(safe-area-inset-bottom);

  .service-box {
    background: #fff;
    border-radius: 16rpx;
    margin: 20rpx;
    padding: 30rpx 20rpx;
    box-shadow: $shadow;

    .user-box {
      margin-bottom: 40rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      background: linear-gradient(135deg, lighten($primary-color, 35%), lighten($primary-color, 42%));

      .avatar {
        width: 120rpx;
        height: 120rpx;
        margin-right: 30rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255,255,255,0.6);
        overflow: hidden;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .font-size-lg {
        font-size: $font-size-lg;
        color: $text-color;

        &.font-weight-bold {
          font-weight: 500;
        }
      }
    }

    .font-size-lg {
      padding: 0 20rpx;
      margin-bottom: 30rpx;
      font-size: $font-size-lg;
      color: $text-color;
      
      &.text-color-base {
        color: $text-color-base;
      }
      
      &.font-weight-bold {
        font-weight: 500;
      }
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      padding: 10rpx;

      .grid {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 0;
        transition: all 0.3s;

        &:active {
          opacity: 0.7;
        }

        .image {
          width: 90rpx;
          height: 90rpx;
          margin-bottom: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: rgba($primary-color, 0.1);
          transition: all 0.3s;

          image {
            width: 50rpx;
            height: 50rpx;
            opacity: 0.8;
          }
        }

        view {
          font-size: $font-size-base;
          color: $text-color;
        }

        &:hover {
          .image {
            transform: translateY(-2rpx);
            background: rgba($primary-color, 0.15);
          }
        }
      }
    }
  }
}

// 适配暗黑模式
@media (prefers-color-scheme: dark) {
  .container {
    background: darken($bg-color, 85%);

    .service-box {
      background: darken($bg-color, 80%);
      
      .user-box {
        background: linear-gradient(135deg, darken($primary-color, 20%), darken($primary-color, 25%));
      }

      .font-size-lg {
        color: lighten($text-color, 70%);
      }

      .row .grid {
        .image {
          background: rgba($primary-color, 0.2);
        }

        view {
          color: lighten($text-color, 60%);
        }

        &:hover .image {
          background: rgba($primary-color, 0.25);
        }
      }
    }
  }
} 